<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <style class="vjs-styles-defaults">
         .video-js {
         width: 300px;
         height: 150px;
         }
         .vjs-fluid {
         padding-top: 56.25%
         }
      </style>
      <style class="vjs-styles-dimensions">
         .p-video-dimensions {
         width: 1280px;
         height: 720px;
         }
         .p-video-dimensions.vjs-fluid {
         padding-top: 56.25%;
         }
      </style>
      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1user-scalable=no">
      <title>直播聊天室</title>
      <meta name="screen-orientation" content="portrait">
      <meta name="x5-orientation" content="portrait">
      <meta name="format-detection" content="telephone=no, email=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <link rel="dns-prefetch" href="http://b.bdstatic.com/">
      <link rel="dns-prefetch" href="http://s.bdstatic.com/">
      <link rel="dns-prefetch" href="http://mbdp02.bdstatic.com/">
      <script>!function(e,n){var t=e.createElement("_").style;if(t.width="1vw",!t.width){var i=e.documentElement,o="orientationchange"in n?"orientationchange":"resize",a=function(){var e=i.clientWidth;e&&(i.style.fontSize=e/10+"px")};a(),n.addEventListener(o,a,!1)}}(document,window)</script>
      <style>*{margin:0;padding:0;box-sizing:border-box}html{font-size:10vw}</style>
      <link href="index.31f0aa4c.css" rel="stylesheet">
   </head>
   <body ontouchstart="">
      <script>function getUrlParam(a){var t=new RegExp("(^|(&|/?))"+a+"=([^&]*)(&|$)","i"),i=window.location.search.substr(1).match(t);return null!==i?i[3]:""}window.initData= {"user":{"islogin":1,"puid":"gP2iigPz2ieqA"},"deviceId":"R58a9G1607737855"} ||{};try{window.initData.roomId=getUrlParam("room_id")}catch(a){window.initData.roomId=""}</script>
      <div id="app-pc">
         <div class="pc-live" style="background-image: url(&quot;https://mbdp02.bdstatic.com/static/live-h5/img/1.ffa35b8.png&quot;);">
            <header class="header">
               <div class="header-logo">
                  <a href="https://www.baidu.com/" target="_blank" class="header-logo-icon"></a>
               </div>
               <div class="userinfo">
                  <a class="text-logo" href="https://www.baidu.com/" target="_blank">个人中心</a>
                  <div class="info-box">
                     <span class="user-avatar" style="background-image: url(&quot;https://himg.bdimg.com/sys/portrait/item/wise.1.6bb1df1d.4RTkiFxKrntGg0iBloxulw.jpg?time=3641&quot;);"></span><!--3-->
                     <span class="user-name">vbidokj8312</span>
                     <div class="usermenu">
                        <div class="bdmenu"></div>
                        <span>退出</span>
                     </div>
                     <!--4-->
                  </div>
               </div>
            </header>
            <div class="pc-container">
               <div class="left-box">
                  <div class="title">
                     <!--对Video进行流加载，参考 https://github.com/Bilibili/flv.js -->
                     <span class="title-name">直播内容标题</span>
                     <span class="title-tag">直播中</span><!--5-->
                  </div>
                  <p class="title-desc" title="直播内容描述">这是直播内容描述 ... </p>
                  <div class="live-video-container">
                     <div id="p-video" controlslist="nodownload" preload="auto" t7-video-player-type="inline" x5-video-player-type="h5-page" x-webkit-airplay="allow" crossorigin="anonymous" x5-playsinline="true" webkit-playsinline="true" playsinline="true" class="video-js vjs-fluid p-video-dimensions vjs-controls-enabled vjs-workinghover vjs-v7 vjs-live vjs-playing vjs-has-started vjs-user-inactive" tabindex="-1" role="region" lang="zh-cn" aria-label="Video Player">
                        <video class="vjs-tech" playsinline="playsinline" webkit-playsinline="true" x5-playsinline="true" crossorigin="anonymous" x-webkit-airplay="allow" x5-video-player-type="h5-page" t7-video-player-type="inline" preload="auto" controlslist="nodownload" id="p-video_html5_api" tabindex="-1" role="application" autoplay="" src="blob:http://mbd.baidu.com/07857c81-c7b1-4565-97c8-7c36960170d6">
                        </video>
                     </div>
                  </div>
               </div>
               <div class="right-box">
                  <div class="chat-room">
                     <div class="chat-room-title">
                        聊天室
                     </div>
                     <div class="chat-room-msg" id="pc-chat-box">
                        <div class="chat-room-msg-tip">
                           提醒：欢迎来到直播间！我们提倡绿色文明直播，禁止未成年人直播或充值消费。如直播间内出现反动、违法违规、色情低俗、吸烟酗酒等内容，经举报或巡查发现将严肃处理。如主播在直播过程中以推广服务，交友等方式诱导打赏、私下交易，请谨慎判断，以防人身或财产损失。
                        </div>
                     </div>
                     <div class="chat-room-input">
                        <div>
                           <input id="say" class="chat-input" type="text" placeholder="我来说两句" style="">
                        </div>
                        <button id="send" class="chat-btn" type="button">
                        发送
                        </button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
   <script src="logic.js"></script>
</html>